<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>欢迎页</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">

<link rel="stylesheet" href="/js/plugins/openlayer/ol.css"
	type="text/css">
<style>
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-size: 12px
}

#map {
	height: 500px;
	width: 100%;
	background: #ccc;
	cursor: default;
	clear: both;
	position: relative;
}

#table {
	height: 25%;
	width: 100%
}

.cm_position {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 99;
	line-height: 23px;
	display: inline;
}

#cmdiv {
	display: none;
}
</style>
<link href="/css/plugins/bootstrap-table/bootstrap-table.min.css"
	th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}"
	rel="stylesheet">
<link href="/css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}"
	rel="stylesheet">
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading">关于 天网系统</div>
		<!-- <div style="padding: 10px 0 20px 20px;">
			<h1>简介</h1>
			<p>天网系统</p>

			<h2>定位</h2>
			<ul>
				<li>维护社会稳定</li>
				<li>人民生活安康</li>
				<li>社会风气和谐</li>
			</ul> 
			<h2>简单使用说明</h2>
			<ol>
				<li>为人民服务</li> 
			</ol>
		</div> -->
		<div id="map" class="map">
			<div style="position:absolute;bottom:50px;left:15px;z-index:100;line-height:23px; background-color:#ffd800;width:300px;height:30px;"
		     id="location"></div> 
			 
		</div>


	</div>
</body>
<div th:include="include::footer"></div>
<script src="/js/plugins/openlayer/ol.js"></script>
<!-- <script type="text/javascript" src="/js/appjs/camera/mapHelper.js"></script> 
<script type="text/javascript" src="/js/appjs/camera/manage.js"></script> -->
<script type="text/javascript">
	var c = ol.proj.transform([ 118.95632939373546, 42.294237816899766 ],
			'EPSG:4326', 'EPSG:3857');

	var map = new ol.Map(
			{
				target : 'map',
				layers : [ new ol.layer.Tile(
						{
							source : new ol.source.XYZ(
									{
										//   url:'http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'
										//    url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
										//     url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
										//  url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
										//         url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
										//url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
										// url:'http://192.168.0.100/mapServer1/{z}/{x}/{y}.jpg'
										//可以自行下载地图瓦片进行内网部署
										url : 'http://mt2.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
									})
						}) ],

				view : new ol.View({
					center : c,
					zoom : 15,
					maxZoom : 21,
					minZoom : 1,
				})

			});

	var ct = new ol.control.MousePosition({ 
	      target:document.getElementById("location"),
	      //coordinateFormat:ol.coordinate.createStringXY(100), 
	      //coordinateFormat: ol.coordinate.createStringXY(4),      // 将坐标保留4位小数位，并转换为字符串
	      projection: 'EPSG:4326',                                // 定义投影
	      className: 'custom-mouse-position',                     // 控件的CSS类名
	      target: document.getElementById('location'),      // 将控件渲染在该DOM元素中
	      undefinedHTML: '&nbsp;'                                 // 鼠标离开地图时，显示空格 
	  })
	 
	  map.addControl(ct);  
	
	var lat = localStorage.getItem('lat');
    var lng = localStorage.getItem('lng');
    //坐标回显
	if(lat && lng){
		var startMarker = new ol.Feature({
			type : 'icon', 
			geometry : new ol.geom.Point([lat,lng])
		}); 
		var vectorLayer = new ol.layer.Vector({
			source : new ol.source.Vector({
				features : [ startMarker ]
			}),
			style : new ol.style.Style({
				image : new ol.style.Icon({
					anchor : [ 0.7, 0.7 ],
					src : '/images/cctv.png'
				})
			})
		});
		map.addLayer(vectorLayer);
	} 
	
	addIconMarker(map);
	function addIconMarker(map){
		map.on('singleclick', function(evt) {
			var coordinate = evt.coordinate;
			var hdms = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'); 
			console.dir(coordinate);  
			var startMarker = new ol.Feature({
				type : 'icon', 
				geometry : new ol.geom.Point(coordinate)
			}); 
			var vectorLayer = new ol.layer.Vector({
				source : new ol.source.Vector({
					features : [ startMarker ]
				}),
				style : new ol.style.Style({
					image : new ol.style.Icon({
						anchor : [ 0.7, 0.7 ],
						src : '/images/cctv.png'
					})
				})
			});
			map.addLayer(vectorLayer);
			toAdd(coordinate[0],coordinate[1]);
			parent.layer.close(parent.layer.getFrameIndex(window.name));
		});
	}
	function toAdd(lat,lng){
        var hs = [];
        hs.lat = lat; 
        hs.lng = lng; 
		parent.getLocation(hs); 
    }
</script>
</html>